<template>
  <div class="content">
    <!-- <div v-if="contentPage && !detialPage" class="topBanner">
      <div class="top-center">
        <span>Help center</span>
      </div>
      <div class="top-problems">
        <span>Help users solve problems</span>
      </div>
      <div class="top-search">
        <input v-model="searchName" type="text" placeholder="Please enter">
        <div class="search-img" @click="search">
          <img src="@/assets/loginImgs/search.png" alt="">
        </div>
      </div>
    </div> -->
    <div class="center">
      <div class="center-content">
        <category-menu @category="categoryChange" />
        <help-home
          v-if="!contentPage && !detialPage"
          :title="title"
          @category="categoryChange"
        />
        <help-content
          v-if="contentPage && !detialPage"
          :id="id"
          :category-id="categoryId"
          :more="more"
          :title="title"
          :search-name="searchName"
          @category="categoryChange"
        />
        <help-detial
          v-if="detialPage && !contentPage"
          :id="id"
          :category-id="categoryId"
          :title="title"
          @category="categoryChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CategoryMenu from './components/categoryMenu';
import HelpContent from './helpContent';
import HelpHome from './helpHome';
import HelpDetial from './helpDetial';
export default {
  components: {
    CategoryMenu,
    HelpContent,
    HelpHome,
    HelpDetial
  },
  data() {
    return {
      contentPage: false,
      detialPage: false,
      searchName: '',
      loading: false,
      title: '',
      more: '',
      id: -1,
      categoryId: -1
    };
  },
  mounted() {
    if (this.$route.query.type === 'other') {
      this.detialPage = true;
      this.contentPage = false;
      this.id = parseInt(this.$route.query.id);
      this.title = this.$route.query.title;
    }
    this.$nextTick(function() {
      if (
        document.documentElement.clientHeight >
        document.getElementsByClassName('content')[0].clientHeight
      ) {
        document.getElementsByClassName('content')[0].style.minHeight =
          document.documentElement.clientHeight -
          document.getElementsByClassName('header')[0].clientHeight -
          document.getElementsByClassName('footer')[0].clientHeight +
          'px';
      } else {
        document.getElementsByClassName('content')[0].style.minHeight =
          950 + 'px';
      }
    });
  },
  methods: {
    categoryChange(data) {
      this.title = data.name;
      this.id = data.id;
      this.more = data.more;
      this.searchName = data.searchName;
      if (data.id !== -1 || data.searchName) {
        this.contentPage = true;
      } else {
        this.contentPage = false;
      }
      if (data.type) {
        this.categoryId = data.categoryId;
        this.detialPage = true;
        this.contentPage = false;
      } else {
        this.detialPage = false;
      }
      this.$forceUpdate();
    },
    search() {
      this.contentPage = true;
      this.detialPage = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  min-width: 1200px;
  padding-top: 70px;
  padding-bottom: 40px;
  background: #f9f9f9;
}
.topBanner {
  text-align: center;
  height: calc(100vw / 3.25);
  background: url("../../assets/loginImgs/help.jpg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .top-center {
    font-size: calc(100vw / 24);
    font-weight: bold;
    line-height: calc(100vw / 18.12);
    color: rgba(255, 255, 255, 1);
    margin-top: calc(100vw / 24);
    opacity: 1;
  }
  .top-problems {
    font-size: calc(100vw / 38.4);
    font-weight: 400;
    line-height: calc(100vw / 33.1);
    color: rgba(255, 255, 255, 1);
    opacity: 1;
  }
  .top-search {
    width: calc(100vw / 2.78);
    height: calc(100vw / 30);
    margin: 0 auto;
    margin-top: calc(100vw / 32);
    position: relative;
    input {
      width: 100%;
      height: 100%;
      border: none;
      font-size: calc(100vw / 73.85);
      padding: 0 calc(100vw / 64);
      outline: none;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.16);
      opacity: 1;
      border-radius: 32px;
    }
    .search-img {
      width: calc(100vw / 60);
      height: calc(100vw / 60);
      position: absolute;
      right: calc(100vw / 54.86);
      bottom: calc(100vw / 137.14);
      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
  }
}
.center {
  width: 1200px;
  margin: 0 auto;
  // overflow: hidden;
  // margin-top: calc(100vw / 14.77 / -1);
  &-content {
    display: flex !important;
    justify-content: space-between;
    margin-top: 40px;
  }
}
</style>
